JavaScript Nullish Coalescing: Assegnazione di Valori Predefiniti vs. Gestione dei Valori Falsy

Gli sviluppatori JavaScript hanno spesso la necessità di assegnare valori predefiniti alle variabili quando il valore originale è mancante o non valido. Tradizionalmente, per questo scopo si utilizzava l'operatore OR logico (||). Tuttavia, l'operatore di coalescenza nullo (??), introdotto in ECMAScript 2020, fornisce una soluzione più precisa e affidabile, specialmente quando si ha a che fare con valori falsy. Questa guida completa esplora le sfumature della coalescenza nulla, confrontandola con l'operatore OR logico e mostrandone le applicazioni in vari scenari.

Comprendere l'Operatore di Coalescenza Nullo (??)

L'operatore di coalescenza nullo (??) restituisce l'operando di destra quando l'operando di sinistra è null o undefined. Altrimenti, restituisce l'operando di sinistra. In termini più semplici, fornisce un valore predefinito solo quando la variabile è esplicitamente null o undefined.

Sintassi:

operandoSinistro ?? operandoDestro

Esempio:

            const name = null ?? "Guest";
console.log(name); // Risultato: "Guest"

const age = undefined ?? 25;
console.log(age); // Risultato: 25

const score = 0 ?? 100;
console.log(score); // Risultato: 0

            

              
                Copy
              
            
          

Differenze tra Coalescenza Nulla (??) e OR Logico (||)

Anche l'operatore OR logico (||) offre un modo per assegnare valori predefiniti. Tuttavia, tratta qualsiasi valore falsy (false, 0, '', NaN, null, undefined) come equivalente a null o undefined, portando potenzialmente a comportamenti inaspettati.

Esempio con OR Logico:

            const quantity = 0 || 10;
console.log(quantity); // Risultato: 10 (inaspettato, poiché 0 è un valore falsy)

const message = '' || "No message";
console.log(message); // Risultato: "No message" (inaspettato, poiché '' è un valore falsy)

            

              
                Copy
              
            
          

Esempio con Coalescenza Nulla:

            const quantity = 0 ?? 10;
console.log(quantity); // Risultato: 0 (corretto, poiché 0 non è null o undefined)

const message = '' ?? "No message";
console.log(message); // Risultato: "" (corretto, poiché '' non è null o undefined)

            

              
                Copy
              
            
          

Come si può vedere, l'operatore di coalescenza nullo si attiva solo quando l'operando di sinistra è esplicitamente null o undefined, preservando i valori falsy come 0 e ''.

Casi d'Uso della Coalescenza Nulla

La coalescenza nulla è particolarmente utile in scenari in cui è necessario distinguere tra un valore mancante (null o undefined) e un valore falsy valido.

1. Gestire le Opzioni di Configurazione

Quando si gestiscono opzioni di configurazione, potrebbe essere necessario fornire valori predefiniti per le impostazioni che non sono state definite esplicitamente. L'uso di ?? garantisce che i valori falsy validi (ad esempio, 0 per un valore di timeout) non vengano accidentalmente sostituiti con il valore predefinito.

            const config = {
  timeout: 0,
  maxRetries: null,
  apiEndpoint: undefined
};

const timeout = config.timeout ?? 5000; // Usa 0 se il timeout è impostato esplicitamente, altrimenti imposta il predefinito a 5000
const maxRetries = config.maxRetries ?? 3; // Usa 3 se maxRetries è null o undefined
const apiEndpoint = config.apiEndpoint ?? "https://example.com/api"; //Usa l'endpoint predefinito se apiEndpoint è null o undefined

console.log(`Timeout: ${timeout}, Max Retries: ${maxRetries}, API Endpoint: ${apiEndpoint}`);
// Risultato: Timeout: 0, Max Retries: 3, API Endpoint: https://example.com/api

            

              
                Copy
              
            
          

2. Lavorare con le Risposte delle API

Le risposte delle API contengono spesso campi che potrebbero essere mancanti o avere valori falsy impostati esplicitamente. La coalescenza nulla consente di gestire questi scenari con eleganza, assicurando di fornire valori predefiniti solo quando un campo è realmente mancante.

Esempio: Una risposta API semplificata che rappresenta un utente:

            const user = {
  name: "Alice",
  age: 30,
  countryCode: null,
  acceptedTerms: false,
  profilePictureURL: undefined
};

const displayName = user.name ?? "Unknown User";
const userAge = user.age ?? "Age not available";
const country = user.countryCode ?? "US"; //Predefinito a "US" se null/undefined
const hasAcceptedTerms = user.acceptedTerms ?? true; //Predefinito a true se null/undefined
const profilePic = user.profilePictureURL ?? "/default-profile.png"; //Immagine predefinita se null/undefined

console.log(`Name: ${displayName}`); // Risultato: Name: Alice
console.log(`Age: ${userAge}`); // Risultato: Age: 30
console.log(`Country: ${country}`); // Risultato: Country: US
console.log(`Accepted Terms: ${hasAcceptedTerms}`); // Risultato: Accepted Terms: false
console.log(`Profile Picture: ${profilePic}`); //Risultato: Profile Picture: /default-profile.png

            

              
                Copy
              
            
          

In questo esempio, impostiamo il valore predefinito a "US" solo se `countryCode` è esplicitamente `null` o `undefined`. Se l'API avesse restituito `countryCode: ""`, la stringa vuota sarebbe stata preservata, riflettendo il codice paese effettivo dell'utente (anche se potenzialmente mancante).

3. Fornire Valori di Fallback nelle Funzioni

Quando si scrivono funzioni che accettano parametri opzionali, la coalescenza nulla può essere utilizzata per fornire valori predefiniti per gli argomenti mancanti.

            function greet(name, greeting) {
  const displayName = name ?? "Guest";
  const salutation = greeting ?? "Hello";
  return `${salutation}, ${displayName}!`;
}

console.log(greet("Bob", "Good morning")); // Risultato: Good morning, Bob!
console.log(greet(null, undefined)); // Risultato: Hello, Guest!
console.log(greet("", "")); // Risultato: , !
console.log(greet("", null)); // Risultato: Hello, !

            

              
                Copy
              
            
          

Questo approccio garantisce che la funzione abbia sempre un valore con cui lavorare, anche se il chiamante non fornisce tutti gli argomenti.

4. Internazionalizzazione e Localizzazione (i18n/l10n)

Quando si lavora con applicazioni internazionalizzate, si hanno spesso traduzioni diverse per varie stringhe. La coalescenza nulla può essere utilizzata per fornire una traduzione predefinita se una traduzione specifica è mancante per una particolare lingua.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour"
  }
};

function translate(key, language) {
  return translations[language]?.[key] ?? translations.en[key] ?? `Translation missing for key: ${key}`;
}

console.log(translate("greeting", "fr")); // Risultato: Bonjour
console.log(translate("farewell", "fr")); // Risultato: Translation missing for key: farewell
console.log(translate("greeting", "de")); // Risultato: Hello (ripiega sull'inglese)

            

              
                Copy
              
            
          

In questo esempio, proviamo prima a trovare la traduzione per la lingua e la chiave specificate. Se questa è mancante, ripieghiamo sulla traduzione inglese. Se anche la traduzione inglese è mancante, restituiamo un messaggio che indica che la traduzione non è disponibile.

5. Gestire l'Input dell'Utente nei Moduli

Quando si elabora l'input dell'utente proveniente da moduli, si possono incontrare casi in cui alcuni campi vengono lasciati vuoti o contengono stringhe vuote. L'uso dell'operatore di coalescenza nullo in combinazione con l'operatore di concatenamento opzionale (?.) può essere molto efficace quando si ha a che fare con input dell'utente profondamente annidati.

            const formData = {
  user: {
    name: "",
    address: {
      city: null,
      country: undefined
    }
  }
};

const userName = formData.user.name || "No Name Provided";
const safeUserName = formData?.user?.name ?? "No Name Provided";
const userCity = formData?.user?.address?.city ?? "City Unknown";
const userCountry = formData?.user?.address?.country ?? "Country Unknown";

console.log(userName); // No Name Provided (perché la stringa vuota è falsy)
console.log(safeUserName); // "" (perché safeUserName controlla esplicitamente per null o undefined)
console.log(userCity); // City Unknown
console.log(userCountry); // Country Unknown

            

              
                Copy
              
            
          

Precedenza degli Operatori e Combinazione con Altri Operatori

L'operatore di coalescenza nullo ha una precedenza degli operatori relativamente bassa. Ciò significa che spesso sarà necessario utilizzare le parentesi per assicurarsi che venga valutato correttamente, specialmente quando combinato con altri operatori come l'AND logico (&&) o l'OR logico (||).

Nota Importante: Non è possibile combinare direttamente ?? con && o || senza usare le parentesi. Questo per evitare ambiguità nell'ordine delle operazioni.

Uso Corretto:

            const value = (someValue ?? 10) && true;
console.log(value); //Risultato: true se someValue non è null o undefined, altrimenti false

const result = (null ?? 5) + 10; // Risultato: 15

            

              
                Copy
              
            
          

Uso Errato (Risulterà in un SyntaxError):

            // const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'

// const result = null ?? 5 + 10; // SyntaxError: Unexpected number

            

              
                Copy
              
            
          

Compatibilità dei Browser

L'operatore di coalescenza nullo (??) è un'aggiunta relativamente recente a JavaScript. Assicurati che i browser di destinazione lo supportino. La maggior parte dei browser moderni lo supporta, ma i browser più vecchi potrebbero richiedere la traspilazione tramite strumenti come Babel.

Per verificare la compatibilità dei browser, puoi fare riferimento a risorse come MDN Web Docs.

Migliori Pratiche per l'Uso della Coalescenza Nulla

• Usalo quando devi distinguere tra valori mancanti (null o undefined) e valori falsy validi.
• Usa sempre le parentesi quando combini ?? con && o || per evitare errori di sintassi e garantire una valutazione corretta.
• Sii consapevole della compatibilità dei browser e considera la traspilazione se necessario.
• Documenta chiaramente l'uso di ?? per migliorare la leggibilità del codice.
• Testa a fondo il tuo codice per assicurarti che i valori predefiniti vengano assegnati correttamente in tutti gli scenari.

Conclusione

L'operatore di coalescenza nullo (??) è un'aggiunta potente e preziosa al linguaggio JavaScript. Fornisce un modo più preciso e affidabile per assegnare valori predefiniti rispetto al tradizionale operatore OR logico (||), specialmente quando si ha a che fare con valori falsy. Comprendendone le sfumature e le migliori pratiche, puoi scrivere codice JavaScript più pulito, robusto e manutenibile. Considera di adottare ?? nei tuoi progetti per migliorare la chiarezza e l'accuratezza delle tue assegnazioni di valori predefiniti. Ricorda di testare a fondo il tuo codice su vari browser e di considerare la traspilazione per ambienti più vecchi.

Questa guida ha fornito una panoramica completa. Sperimenta con ?? in contesti diversi per coglierne appieno le capacità e i limiti, e affina continuamente la tua comprensione attraverso l'applicazione pratica.